---

import I18nKey from "@/i18n/i18nKey";
import { i18n } from "@/i18n/translation";
import { getTagList } from "@/utils/content-utils";
import { getTagUrl } from "@/utils/url-utils";
import ButtonTag from "@/components/control/ButtonTag.astro";
import WidgetLayout from "./WidgetLayout.astro";
import { widgetManager } from "@/utils/widget-manager";

const tags = await getTagList();

const COLLAPSED_HEIGHT = "7.5rem";

// 使用统一的组件管理器检查是否应该折叠
const tagsComponent = widgetManager.config.components.find(c => c.type === "tags");
const isCollapsed = tagsComponent ? widgetManager.isCollapsed(tagsComponent, tags.length) : false;

interface Props {
	class?: string;
	style?: string;
}
const className = Astro.props.class;
const style = Astro.props.style;
---
<WidgetLayout name={i18n(I18nKey.tags)} id="tags" isCollapsed={isCollapsed} collapsedHeight={COLLAPSED_HEIGHT} class={className} style={style}>
    <div class="flex gap-2 flex-wrap">
        {tags.map(t => (
            <ButtonTag href={getTagUrl(t.name)} label={`View all posts with the ${t.name.trim()} tag`}>
                {t.name.trim()}
            </ButtonTag>
        ))}
    </div>
</WidgetLayout>